<template>
	<view class="pay-container mainpadding mainbgc">
		<view class="flexleft">
			<view class="img margin-right">
				<image src="../../static/images/tabbar/hotel-active.png" mode=""></image>
			</view>
			<view class="hotelName">{{hotelinfo.name}}</view>
		</view>
		<view class="payCount mainpadding ffffff border-r2 margin-top">
			<input type="text" placeholder="请输入支付金额" v-model="pay_price">
		</view>
		<!-- <view class="methods ffffff border-r1 margin-top">
      <view class="title mainpadding">选择支付方式</view>
      <view class="methods-item mainpadding ffffff flexleft">
        <image src="../../static/images/scenic/weixin-logo.png" mode="" class="logo"></image>
        <view class="name flex1">微信</view>
      </view>
      
      <view class="methods-item mainpadding ffffff flexleft">
        <image src="../../static/images/scenic/yue-logo.png" mode="" class="logo"></image>
        <view class="name flex1">余额支付</view>
      </view>
    </view> -->
		<view class="methods ffffff border-r1">
			<view class="title mainpadding">选择支付方式</view>
			<view class="methods-item mainpadding ffffff flexbetween" @click="changeIndex(10)">
				<view class="left flexcenter">
					<image src="../../static/images/scenic/weixin-logo.png" mode="" class="logo"></image>
					<view class="name flex1">微信</view>
				</view>
				<view class="right">
					<image v-if="activeIndex==10" src="../../static/images/hotel/checked.png"
						style="width: 24rpx;height: 24rpx;"></image>
					<image v-if="activeIndex!==10" src="../../static/images/hotel/unchecked.png"
						style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>
			<view class="methods-item mainpadding ffffff flexbetween" @click="changeIndex(30)">
				<view class="left flexcenter">
					<image src="../../static/images/scenic/yue-logo.png" mode="" class="logo"></image>
					<view class="name flex1">余额支付</view>
				</view>
				<view class="right">
					<image v-if="activeIndex==30" src="../../static/images/hotel/checked.png"
						style="width: 24rpx;height: 24rpx;"></image>
					<image v-if="activeIndex!==30" src="../../static/images/hotel/unchecked.png"
						style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>
		</view>
		<!-- 积分抵扣： -->
		<view class="cent mainpadding ffffff flexleft border-r1 margin-top">
			<image src="../../static/images/scenic/jifen-logo.png" mode="" class="logo"></image>
			<view class="cent-content">
				<text>积分抵扣</text>
				<text class="kedikou">（可抵扣{{userinfo.score || "0"}}）</text>
			</view>
			<view class="">
				<u-switch v-model="switchValue" @change="change" activeColor="#00D2E1"></u-switch>
			</view>
		</view>
		<view class="buyBtn" @click="gopay">确认支付</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				switchValue: true,
				activeIndex: 10, //10微信支付，30余额支付
				listid: "",
				pay_price: "",
				userinfo: {},
				wxpay: {},
				hotel_id:0,
				hotelinfo:{}
			}
		},
		onLoad(optios) {
			let _this = this
			// #ifdef MP-WEIXIN
			const url = decodeURIComponent(optios.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
				}
				_this.hotel_id = optios.shop_id ? optios.shop_id : (theRequest.shop_id ? theRequest.shop_id :
					0);
			}
			// #endif
			this.gethotel()
		},
		onShow() {
			if (httpRequest.checkIsLogin()) {
				this.getinfo()
				return false;
			}
		},
		methods: {
			change(e) {
				console.log('change', e)
			},
			gethotel(){
				httpRequest.request('api/shop/detail', 'GET', {
					id:this.hotel_id,
					lat:0,
					lng:0
				}).then(res => {
					this.hotelinfo = res.data
				})
			},
			getinfo() {
				httpRequest.request('api/user/index', 'GET', {}).then(res => {
					this.userinfo = res.data
				})
			},
			changeIndex(item) {
				this.activeIndex = item
			},
			gopay() {
				let _this = this
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				if(_this.pay_price == ""){
					httpRequest.toast("请输入支付金额")
					return
				}
				httpRequest.request('api/payorder/payPrice', 'POST', {
					shop_id: _this.hotel_id,
					pay_price:_this.pay_price,
					pay_type: _this.activeIndex,
					score_dk: _this.switchValue ? 1 : 0, //积分抵扣
				}, false, false, true).then(res => {
					if (_this.activeIndex == 10) { //微信支付流程
						if (res.code == 1) {
							_this.wxpay = JSON.parse(res.data.wxconfig)
							_this.callPayMent()
						}else if(res.code == 2){
							httpRequest.toast(res.msg);
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/hotel/jiudian"
								})
							}, 500)
						} else {
							httpRequest.toast(res.msg);
						}
					} else { //余额支付流程
						httpRequest.toast(res.msg);
						if (res.code == 1) {
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/hotel/jiudian"
								})
							}, 500)
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			callPayMent() {
				let _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: _this.wxpay.timeStamp,
					nonceStr: _this.wxpay.nonceStr,
					package: _this.wxpay.package,
					signType: _this.wxpay.signType,
					paySign: _this.wxpay.paySign,
					success: function(res) {
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/hotel/jiudian"
							})
						}, 500)
					},
					fail: function(err) {
						// 支付失败
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.hotelName {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.logo {
		width: 32rpx;
		height: 32rpx;
		margin-right: 9rpx;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.cent {
		justify-content: space-between;
	}

	.cent-content {
		flex: 1;
	}

	.kedikou {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.buyBtn {
		position: fixed;
		bottom: 30rpx;
		background-color: pink;
		width: calc(100vw - 60rpx);
		text-align: center;
		padding: 18rpx 0;
		background-color: #FF5C00;
		color: #fff;
		border-radius: 64rpx;
	}
</style>
